<template>
  <div>
    <!-- 显示隐藏 -->
    <!-- v-if -->
    <!-- v-if  v-else -->
    <!-- v-if  v-else-if v-else-->
    <!-- <input type="checkbox" v-model="flag">
    <h2 v-if="flag">你能看到我吗?</h2>
    <h2 v-else>暂无信息</h2> -->

    <!-- <input type="text" v-model="val" id="">
    <h2 v-if="val === '1'">你看看我想你了吗</h2>
    <h2 v-if="val === '2'">你走吧我不想理你</h2>
    <h2 v-if="val === '3'">我只是不想回</h2> -->

    <!-- <h2 v-if="val === '1'">你看看我想你了吗</h2>
    <h2 v-else-if="val === '2'">你走吧我不想理你</h2>
    <h2 v-else>我只是不想回</h2> -->

    <input type="checkbox" v-model="flag" id="" />
    <h2 v-show="flag">你好</h2>
    <h2 v-if="flag">你好</h2>
    <!-- v-show 和 v-if的区别 
    v-if是真正的条件渲染根据条件真假来去创建与销毁节点 同时 v-if 也是惰性的 
    如果初次渲染时 条件为假 则 节点直接不创建
    v-show 的显示隐藏是通过控制css中的display：none 来控制显示隐藏的， 
    特点即是区别-->

    <!-- v-for 和 v-if 能否同级使用 -->
    <!-- 不能 -->
    <!-- 因为 在vue2中 v-for 的优先级 比 v-if 要更高 所以导致 每次循环 都是先创建节点 再判断条件 条件为假在销毁掉 不停的创建和销毁导致 页面可能出现卡顿 渲染效率下降 -->
    <div v-for="(item, index) in arr" :key="index">
      <span v-if="item != 0">{{ item }}</span>
    </div>
  </div>
</template>

<script>    
export default {
  data(e) {
    return {
      arr: [121, 234, 0, 6, 345, 0, 346],
      t: e.keyCode,
      val: "",
      flag: false,
    };
  },
};
</script>

<style>
</style>